<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">

		<title>05CSS텍스트</title>
		<style type="text/css">
			
		/*웹글꼴은 구글 www.google.com/fonts 에서 다운*/
			
			@font-face {
				font-family: 'Nanum Myeongjo';
				font-style: normal;
				font-weight: 800;
				src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanummyeongjo/v2/NanumMyeongjo-ExtraBold.eot);
				src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanummyeongjo/v2/NanumMyeongjo-ExtraBold.eot?#iefix) format('embedded-opentype'), url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanummyeongjo/v2/NanumMyeongjo-ExtraBold.woff2) format('woff2'), url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanummyeongjo/v2/NanumMyeongjo-ExtraBold.woff) format('woff'), url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanummyeongjo/v2/NanumMyeongjo-ExtraBold.ttf) format('truetype');
			}
			@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
			@import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);
			@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
			@import url(http://fonts.googleapis.com/earlyaccess/hanna.css);
			
			#t01 {font-family: 'Nanum Myeongjo';}
			#t02 {font-family: 'Nanum Gothic', sans-serif;}
			#t03{font-family: 'Nanum Pen Script', cursive;}
			#t04{font-family: 'Hanna', serif;}
			
		</style>

	</head>

	<body>
		<h1>05CSS텍스트</h1>
		<h2>글자크기 : font-size</h2>
		<p style="font-size: 1em">
			이것은 100% 정도의 크기 입니다.
		</p>

		<p style="font-size: 1.5em">
			이것은 150% 정도의 크기 입니다.
		</p>
		<hr />
		<h2>글꼴 지정 : font-family</h2>
		<p style="font-family: 궁서체">
			궁서체로 지정해봄
		</p>
		<p>
			font-face : 지정한 글꼴이 설치되어 있지 않으면 직접 다운로드해서 사용함
		</p>
		<p id="t01">
			@font-face : 상업적 글꼴 제공시 사용
			글꼴 서버에서 글꼴을 다운로드 함
		</p>

		
		<p id="t02"> 가나다라마바사 </p>
		<p id="t03"> 아자차카타파하</p>
		<p id="t04">요요오오후오후어허</p>
		<p>웹 글꼴은 비영리로 구글에서 제공하고 있음 <br /> google.com/fonts</p>
		
		<hr />
		<h2>글꼴 모양,굵기</h2>
		<p style="font-style: italic">글꼴 모양은 normal, italic 등이 있음</p>
		<p style="font-weight: bold">글꼴 굵기는 bold 등이 있음</p>
		
		<hr />
		<h2>글꼴 정렬하기 : text-align</h2>
		<p style="text-align: right">오른쪽 정렬</p>
		<p style="text-align: left">왼쪽정렬</p>
		<p style="text-align: center">가운데 정렬</p>
	
		<hr />
		<h2>줄 간격 지정 : line-height</h2>
		<p style="line-height: 0.1em;">
			1234567890가나다라마바사아자차카타파하<br />
			1234567890가나다라마바사아자차카타파하<br />
			1234567890가나다라마바사아자차카타파하<br />
			1234567890가나다라마바사아자차카타파하<br />
			1234567890가나다라마바사아자차카타파하<br />
		</p>
		
		<hr />
		<h2>글꼴 꾸미기: text-decoration</h2>
		<p style="text-decoration: underline">글꼴꾸미기 : 밑줄</p>
		<p style="text-decoration: overline">글꼴꾸미기 : 윗줄</p>
		<p style="text-decoration: line-through">글꼴꾸미기 : 취소선</p>
		
		<hr />
		<h2>그림자 효과 : text-shadow</h2>
		<p style="text-shadow: 2px 2px 5px navy; font-size 2em; font-weight: bold;">text-shadow : 그림자 시작점x축() 그림자시작y축 흐림정도로 그림자 색상</p>
	</body>
</html>
